<template>
    <div class="content">
        <div class="form">
            <table>
                <thead>
                    <th :data-font="$i18n.locale">{{ $t('userInfo.teamName') }}</th>
                    <th :data-font="$i18n.locale">{{ $t('userInfo.contestType') }}</th>
                    <th :data-font="$i18n.locale">{{ $t('userInfo.lastUpdatedDate') }}</th>
                    <th :data-font="$i18n.locale">{{ $t('userInfo.registrationDeadline') }}</th>
                    <th :data-font="$i18n.locale">{{ $t('userInfo.operate') }}</th>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.matchId">
                        <td>
                            <p :data-font="$i18n.locale">
                                {{ item.teamName }}
                            </p>
                        </td>
                        <td>
                            <p :data-font="$i18n.locale">
                                {{ name(item.matchId) }}
                            </p>
                        </td>
                        <td>
                            <p :data-font="$i18n.locale">
                                {{ timer(item.updateTime) }}
                            </p>
                        </td>
                        <td>
                            <p :data-font="$i18n.locale">
                                {{ timer(item.endTime) }}
                            </p>
                        </td>
                        <td>
                            <el-button @click="update(item.matchId)"> {{ $t('userInfo.update') }} </el-button>
                            <el-button @click="del(item.id)" v-if="!disabled"> {{ $t('userInfo.del') }} </el-button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <empty v-if="list.length <= 0"></empty>
        </div>
    </div>
</template>
<script>
import { applicationInfo, delApplication } from '@/request/api';
import Confirm from '@/components/message/confirm';
import empty from '@/components/common/empty'
export default {
    data() {
        return {
            list: [],
            disabled: false,
            clock: null
        }
    },
    components: {
        empty
    },
    mounted() {
        this.getInfo();
        this.interval();
        if (!this.disabled) {
            this.clock = setInterval(this.interval(), 1000)
        }
    },
    methods: {
        getInfo() {
            applicationInfo().then(res => {
                if (res.data.resultCode == '200') {
                    this.list = res.data.data;
                }
            })
        },
        update(v) {
            if (v == 2) {
                this.$router.push('/application/registrationForm/routine')
            } else if (v == 1) {
                this.$router.push('/application/registrationForm/bacteria')
            } else if (v == 3) {
                this.$router.push('/application/registrationForm/protein')
            }
        },
        del(v) {
            if (this.$i18n.locale === 'zh') {
                Confirm({ title: '删除项目', message: '确定要删除该报名吗？', left: '取消', right: '删除' })
                    .then(() => {
                        delApplication({ id: v }).then(res => {
                            if (res.data.resultCode == '200') {

                                this.$toast('删除成功', 2000, 'success');
                                this.getInfo();
                            }
                        })
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            } else {
                Confirm({ title: 'Delete Item', message: 'Are you sure you want to delete this registration?', left: 'Cancel', right: 'Delete' })
                    .then(() => {
                        delApplication({ id: v }).then(res => {
                            if (res.data.resultCode == '200') {

                                this.$toast('Success', 2000, 'success');

                                this.getInfo();
                            }
                        })
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            }

        },
        interval() {
            if (new Date('2023-06-11T23:59:00').getTime() <= new Date().getTime()) {
                if (this.clock) {
                    clearInterval(this.clock);
                    this.clock = null;
                }
                this.disabled = true;
            }
        }
    },
    computed: {
        timer() {
            return function (v) {
                let num = '';
                if (v) {
                    let date = new Date(v * 1000);
                    let y = date.getFullYear();
                    let m = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
                    let d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
                    num = y + '-' + m + '-' + d
                }
                return num;
            }
        },
        name() {
            return function (v) {
                let num = '';
                if (v == 2) {
                    num = '常规赛'
                } else if (v == 1) {
                    num = '细菌博弈'
                } else if (v == 3) {
                    num = '蛋白设计'
                } else {
                    num = '未知赛事'
                }

                return '大设施赛-' + num;
            }
        }
    },
    unmounted() {
        if (this.clock) {
            clearInterval(this.clock);
            this.clock = null;
        }
    },
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    padding-top: 0.27rem;
    padding-bottom: 1.09rem;

    .form {
        width: 34.99rem;
        height: 21.6rem;
        background: rgba(253, 253, 254, 0.25);
        border: 0.05rem solid #FFFFFF;
        backdrop-filter: blur(10px);
        margin: 0 auto;
        padding: 0.64rem 1.49rem;

        table {
            width: 100%;
            border-collapse: collapse;
            border: none;

            th {
                font-size: 0.53rem;
                font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
                font-weight: normal;
                color: #212121;
                line-height: 0.85rem;
                text-align: left;
            }

            tr {
                border-bottom: 0.03rem #C5C5CA solid;

                td {

                    p {
                        display: inline-block;
                        font-size: 0.53rem;
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.85rem;
                    }

                    .el-button {
                        padding: 0;
                        padding: 0 0.11rem;
                        height: 0.64rem;
                        background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
                        border-radius: 0.11rem;
                        border: 0.03rem solid #7709CC;
                        backdrop-filter: blur(10px);
                    }

                    .el-button :deep(span) {
                        font-size: 0.37rem;
                        font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #7709CC;
                        line-height: 0.59rem;
                    }
                }
            }
        }
    }
}
</style>